<template>
    <view class="page bgf8" :style="{'--color': color}">
        <status-bar title='预约安装订单'></status-bar>
        <view class="classNav bgwhite d-flex j-sb a-center" :style="{top: totalHeight + 'px'}">
            <u-tabs :list="tabList" :lineColor="color" :activeStyle="{color:'#000',fontWeight:'bold'}" @click="tabClick"></u-tabs>
            <view class="btn flexac thmeBg white m-right10" @click="toUrl('/joinPage/unappointed?store_id=' + store_id)">未预约</view>
        </view>
        <view class="p-top100" v-if="list.length">
            <view class="padding20-30 bgwhite m-bot20 p-re" @click="handleCheck(item)" v-for="(item,index) in list" :key="index">
                <view class="d-flex a-center m-bot10">
                    <checkbox :checked="item.checked" :color="color" style="transform:scale(0.7)" v-if="state == 1" />
                    <view class="size28 color_33">单号: {{ item.order_code }}</view>
                </view>
                <view class="color_33 m-bot10">
                    <text class="size26 m-right10">{{ item.res_name }}</text>
                    <text>{{ item.res_tel }}</text>
                </view>
                <view class="color_99 m-bot10">{{ item.res_address }}</view>
                <view class="color_99">预约时间：{{ item.reservation_date }}</view>
                <view class="color_99 m-top10" v-if="item.staffInfo">安装人员：【{{ item.staffInfo.job_number }}】{{ item.staffInfo.name }} {{ item.staffInfo.phone }}</view>
                <view class="d-flex j-end m-top10">
                    <view class="btn plain flexac color_99" @click.stop="refuse(item)" v-if="state == 1">拒绝</view>
                    <view class="btn plain flexac color_99" @click.stop="reset(item)" v-if="state == 2">重置</view>
                    <view class="btn plain flexac color_99" @click.stop="viewDetail(item)" v-if="state == 4">详情</view>
                </view>

                <view class="right_top text-right p-ab" v-if="item.code && state == 2">
                    <view class="color_33">验证码</view>
                    <view class="thmeColor size36 bold t-letter2">{{ item.code }}</view>
                </view>
            </view>
        </view>

        <empty v-if="noData" cat='3' msg='暂无相关的订单~' pad="300"></empty>

        <view class="botBar bgwhite" v-if="checkedList.length">
            <view class="d-flex a-center p-left30">
                <picker :range="staffList" range-key="name" @change="staffChange">
                    <view class="size28">分配给：{{ staff.name || '请选择' }}</view>
                </picker>
            </view>
            <view class="d-flex a-center">
                <view class="d-flex a-center size28 m-left20" @click="checkAll">
                    <checkbox :checked="isCheckAll" :color="color" style="transform:scale(0.7)" />全选
                </view>
                <view class="flex-1 size28 m-left40">已选<text class="size32 thmeColor bold m-left10 m-right10">{{ checkedList.length }}</text>单</view>
                <view class="Btn flexac thmeBg size28 white" @click="batchDispatch">批量派单</view>
            </view>
        </view>

        <u-popup :show="show" :round="10" closeable @close="show = false">
            <view class="botPop padding30" v-if="pageData">
                <view class="color_66 m-bot30" v-if="pageData.end_date">结束日期：{{ pageData.end_date }}</view>
                <view class="size28">{{ pageData.end_content }}</view>
                <view class="m-top30" v-if="pageData.end_photo_Arr.length">
                    <block v-for="(item,index) in pageData.end_photo_Arr" :key="index">
                        <image :src="$imgUrls(item)" mode="widthFix"></image>
                    </block>
                </view>
                <view class="d-flex j-se m-top60">
                    <view class="bot_btn flexac bgEA size28 color_99" @click="reset(pageData)">重置</view>
                    <view class="bot_btn flexac thmeBg size28 white" @click="refuse(pageData)">拒绝</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        data() {
            return {
                tabList: [
                    { text: '待分配', state: '1' },
                    { text: '待安装', state: '2' },
                    { text: '安装失败', state: '4' }
                ],
                store_id: '',
                state: '1', // 全部all、待分配1、待安装2、安装成功3、安装失败4
                list: [], // 预约订单
                page: 1,
                pageNum: 10,
                noData: false,
                noMore: false,
                staffList: [],
                staff: '',
                show: false,
                pageData: '' // 失败详情
            }
        },
        computed: {
            ...mapState(['color', 'totalHeight']),
            checkedList() {
                return this.list.filter(item => item.checked)
            },
            isCheckAll() {
                return this.checkedList.length == this.list.length
            }
        },
        onLoad(e) {
            if(e.store_id) this.store_id = e.store_id
            this.getList()
            this.getStaff()
        },
        methods: {
            getList() {
                this.$showLoading('')
                this.noMore = false
                this.noData = false
                this.$http.post({
                    url: '/dispatch/getStoreOrderDispatch',
                    data: {
                        store_id: this.store_id,
                        state: this.state,
                        page: this.page,
                        pageNum: this.pageNum
                    }
                }).then(res => {
                    this.$hideLoading()
                    if(res.code != 100) return this.$Toast(res.msg)
                    let result = res.data || []
                    result = result.map(item => ({...item, checked: false}))
                    this.list = this.page == 1 ? result : this.list.concat(result)
                    if(result.length < this.pageNum) this.noMore = true
                    if(!this.list.length) this.noData = true

                    this.tabList = this.tabList.map(item => {
                        let num = res[`Count${item.state}`]
                        return {
                            ...item,
                            name: item.text + `(${num})`
                        }
                    })
                })
            },
            getStaff() {
                this.$http.post({
                    url: '/dispatch/getAllStaffList2'
                }).then(res => {
                    this.staffList = res.data || []
                })
            },
            tabClick(e) {
                this.state = e.state
                this.page = 1
                this.getList()
            },
            staffChange(e) {
                let index = e.detail.value
                this.staff = this.staffList[index]
            },
            handleCheck(item) {
                if(this.state == 1) this.$set(item, 'checked', !item.checked)
            },
            checkAll() {
                this.list = this.list.map(item => ({...item, checked: !this.isCheckAll}))
            },
            // 批量派单
            batchDispatch() {
                if(!this.staff) return this.$Toast('请选择员工')
                if(!this.checkedList.length) return this.$Toast('请选择预约单')
                let arr = this.checkedList.map(item => item.res_id)
                this.$http.post({
                    url: '/dispatch/xcxConfigOrderToStaff',
                    data: {
                        store_id: this.store_id,
                        staff_id: this.staff.staff_id,
                        ids: arr.join()
                    }
                }).then(res => {
                    this.$Toast(res.msg)
                    if(res.code != 100) return
                    setTimeout(() => {
                        this.page = 1
                        this.getList()
                    }, 1000)
                })
            },
            viewDetail(item) {
                this.pageData = item
                this.show = true
            },
            refuse(item) {
                this.$Modal('提示', '确定拒绝该预约单吗？').then(res => {
                    if (!res) return
                    this.$http.post({
                        url: '/dispatch/xcxdelOrder',
                        data: {
                            store_id: this.store_id,
                            res_id: item.res_id
                        }
                    }).then(res => {
                        this.$Toast(res.msg)
                        if(res.code != 100) return
                        this.show = false
                        setTimeout(() => {
                            this.page = 1
                            this.getList()
                        }, 1000)
                    })
                })
            },
            // 回收已分配订单
            reset(item) {
                this.$Modal('提示', '确定回收该预约单吗？').then(res => {
                    if (!res) return
                    this.$http.post({
                        url: '/dispatch/xcxRecoveryOrder',
                        data: {
                            store_id: this.store_id,
                            res_id: item.res_id
                        }
                    }).then(res => {
                        this.$Toast(res.msg)
                        if(res.code != 100) return
                        this.show = false
                        setTimeout(() => {
                            this.page = 1
                            this.getList()
                        }, 1000)
                    })
                })
            }
        },
        onReachBottom() {
            if(this.noMore) return
            this.page ++
            this.getList()
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        padding-bottom: calc(200rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
    }
    .classNav {
        width: 100%;
        height: 100rpx;
        position: fixed;
        left: 0;
        z-index: 10;
    }
    .btn {
        width: 128rpx;
        height: 56rpx;
        border-radius: 56rpx;
        &.plain {
            border: 1rpx solid #afafaf;
        }
    }
    .right_top {
        top: 20rpx;
        right: 30rpx;
        z-index: 1;
    }
    .botBar {
        width: 100%;
        height: 200rpx;
        position: fixed;
        left: 0;
        bottom: constant(safe-area-inset-bottom);
        bottom: env(safe-area-inset-bottom);
        z-index: 10;
        > view {
            height: 100rpx;
            border-top: 1rpx solid #EFEFEF;
        }
        .Btn {
            width: 200rpx;
            height: 100%;
        }
    }
    .botPop {
        min-height: 300rpx;
        max-height: 80vh;
        overflow-y: auto;
        .bot_btn {
            width: 240rpx;
            height: 76rpx;
            border-radius: 10rpx;
            letter-spacing: 6rpx;
        }
    }
</style>